http://ry.url.tw/wp/doc/canvas/cv3.htm

<script>
$(function()
{
    function dg(degree)  //我習慣0度是12點那個方位。而且我要傳角度就回傳圓周率
    {
        degree = Number(degree)-90 ;
        return (degree*(Math.PI/180)) ;
    }
    
    var cv$ = $('#cv') ; 
    var eleCv = cv$.get(0) ;
    eleCv.width = 300 ;
    eleCv.height = 300 ;
    
    var ctx = eleCv.getContext('2d') ;

    ctx.fillStyle = 'red' ;  
    ctx.fillRect(0,0,300,300) ;  
    
    ctx.strokeStyle = 'blue' ;
    ctx.lineWidth = 3 ;
    
    ctx.beginPath() ;
    ctx.moveTo(0, 0) ;
    ctx.lineTo(300, 300) ;
    ctx.moveTo(0, 300) ;
    ctx.lineTo(300, 0) ;    
    ctx.stroke() ;
    
    ctx.lineJoin = 'round' ;
    ctx.strokeStyle = 'orange' ;
    ctx.lineWidth = 10 ;
    ctx.beginPath() ;
    ctx.moveTo(150, 150) ;
    ctx.arc(150, 150, 100, dg(-45), dg(45)) ;
    ctx.lineTo(150, 150) ;
    ctx.stroke() ;
    
    ctx.strokeStyle = 'green' ;
    ctx.lineWidth = 3 ;
    ctx.beginPath() ;
    ctx.moveTo(150, 150) ;
    ctx.arc(150, 150, 100, dg(135), dg(225)) ;
    ctx.lineTo(150, 150) ;
    ctx.stroke() ;
    
    ctx.strokeStyle = 'black' ;
    ctx.lineWidth = 3 ;
    ctx.beginPath() ;
    ctx.arc(150, 150, 1, dg(0), dg(360)) ;
    ctx.stroke() ;

    //make a round
    //ctx.strokeStyle = 'pink' ;  
    //ctx.beginPath(); // Start the path  
    //ctx.moveTo(0, 0) ;
    //ctx.lineTo(300, 300) ;
    //ctx.arc(50,50,30,0,1*Math.PI);  
    //ctx.stroke() ;  
    //ctx.closePath(); // Close the path
}) ;
</script>